<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LayIM测试</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
	var socket;
	if ('WebSocket' in window) {
		socket = new WebSocket("ws://localhost:8080/admin-hui/ws");
	} else if ('MozWebSocket' in window) {
		socket = new MozWebSocket("ws://localhost:8080/admin-hui/ws");
	} else {
		socket = new SockJS("http://localhost:8080/admin-hui/ws/sockjs");
	}
	layui.use('layim', function(layim) {
		/**基础配置*/
		layim.config({

			//获取主面板列表信息
			init : {
				url : '${pageContext.request.contextPath}/static/getList.json',
				type : 'get', //默认get，一般可不填
				data : {}
			},

			//配置我的信息（如果设定了该参数，则优先读取该参数，如果没有，这读取init返回的mine信息）
			/*
			mine : {
				"username" : "LayIM体验者", //我的昵称
				"id" : "100000123", //我的ID
				"status" : "online", //在线状态 online：在线、hide：隐身
				"sign" : "在深邃的编码世界，做一枚轻盈的纸飞机", //我的签名
				"avatar" : "a.jpg" //我的头像
			},
			 */

			//群聊面板查看所有群成员
			members : {
				url : '${pageContext.request.contextPath}/static/getMembers.json',
				type : 'get', //默认get，一般可不填
				data : {}
			},
			uploadImage : {
				url : '', //（返回的数据格式见下文）
				type : 'post' //默认post
			},
			uploadFile : {
				url : '', //（返回的数据格式见下文）
				type : 'post' //默认post
			},

			skin : [ 'http://xxx.com/skin.jpg' ],//增加皮肤选择，如果不想增加，可以剔除该项
			brief : false, //是否简约模式（默认false，如果只用到在线客服，且不想显示主面板，可以设置 true）
			title : '我的LayIM', //主面板最小化后显示的名称
			maxLength : 3000, //最长发送的字符长度，默认3000
			isfriend : true, //是否开启好友（默认true，即开启）
			isgroup : true, //是否开启群组（默认true，即开启）
			right : '0px', //默认0px，用于设定主面板右偏移量。该参数可避免遮盖你页面右下角已经的bar。
			chatLog : '/chat/log/', //聊天记录地址（如果未填则不显示）
			find : '/find/', //查找好友/群的地址（如果未填则不显示）
			copyright : true
		//是否授权，如果通过官网捐赠获得LayIM，此处可填true
		});

		/**监听发送消息*/
		layim.on('sendMessage', function(data) {
			console.log(data);
			socket.send({
				type : 'chatMessage',
				mine : data.mine,
				to : data.to
			});
		});

		/**监听收到的聊天消息*/
		socket.onmessage = function(event) {
			var data = JSON.parse(event.data);
			console.log(data);
			//监听消息
			if (data.emit == 'chatMessage') {
				layim.getMessage(data.data); //res.data即你发送消息传递的数据（阅读：监听发送的消息）
				return;
			}
			//监听人员更新
			if (data.emit == 'updateMember') {

			}
		};

		/**layim建立就绪*/
		layim.on('ready', function(res) {
			//添加好友（如果检测到该socket）
			layim.addList({
				type : 'group',
				avatar : "http://tva3.sinaimg.cn/crop.64.106.361.361.50/7181dbb3jw8evfbtem8edj20ci0dpq3a.jpg",
				groupname : 'Angular开发',
				id : "12333333",
				members : 0
			});
			layim.addList({
				type : 'friend',
				groupid : 2,
				avatar : "http://tp2.sinaimg.cn/2386568184/180/40050524279/0",
				username : '冲田杏梨',
				id : "1233333312121212",
				remark : "本人冲田杏梨将结束AV女优的工作"
			});

			/**模拟接受消息（如果检测到该socket）*/
			setTimeout(function() {
				//在好友列表
				layim.getMessage({
					username : "贤心",
					avatar : "http://tp1.sinaimg.cn/1571889140/180/40030060651/1",
					id : "100001",
					type : "friend",
					content : "嗨，你好！欢迎体验LayIM。演示标记：" + new Date().getTime(),
					timestamp : new Date().getTime()
				});

				//不在好友列表，则为临时会话
				layim.getMessage({
					username : "Hi",
					avatar : "http://tva1.sinaimg.cn/crop.7.0.736.736.50/bd986d61jw8f5x8bqtp00j20ku0kgabx.jpg",
					id : "198909151014",
					type : "friend",
					content : "临时：" + new Date().getTime()
				});

				/**移除好友*/
				layim.removeList({
					type : 'friend', //或者group
					id : "1233333312121212" //好友或者群组ID
				});
			}, 1000);
		});

		/**监听查看群员*/
		layim.on('members', function(data) {
			console.log("监听查看群员");
		});

		/**监听聊天窗口的切换*/
		layim.on('chatChange', function(data) {
			console.log("监听聊天窗口的切换");
		});

		/**监听在线状态的切换事件*/
		layim.on('online', function(data) {
			console.log("监听在线状态的切换事件");
		});

	});
</script>
</html>